<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@2.7.14/dist/vue.min.js"></script>
</head>
<body>
<div id="app">
    <form>
        <label for="" style="display: inline-block; width: 100px">用户名:</label><input><br>
        <label for="" style="display: inline-block; width: 100px">密码:</label><input><br>
        <my-input label="用户名"></my-input>
        <my-input label="密码"></my-input>
        <search></search>
        <checkboxs :items="likes"></checkboxs>
        <combo :items="heroes" select="白胜" display="alias" value="name"></combo>
        <combo :items="heroes" select="武松" display="alias" value="name"></combo>
        <combo :items="citys" select="0731" display="name" value="nums"></combo>
    </form>
</div>
<script>
    var Hero = function (name, alias, p, i, a) {
        this.name = name;
        this.alias = alias;
        this.p = p;
        this.i = i;
        this.a = a;
    }
    // 注册全局 vue 组件, 命名规则: 驼峰命名 myInput, 松散命名my-input
    Vue.component("myInput",{
        // template 内部元素, 必须是一个单根节点 DOM 元素
        template: `
        <div style="display: flex; margin-block: 2px">
            <label for="" style="display: inline-block; width: 100px">
            {{label}}:
            </label>
            <input>
        </div>
        `,
        props: ["label"]
    })

    Vue.component("search",{
        // template 内部元素, 必须是一个单根节点 DOM 元素
        template: `
        <div style="display: flex">
            <input>
            <button>搜索</button>
        </div>
        `,
    });

    Vue.component("checkboxs",{
        props:["items"],
        template:`
        <div>
            <span v-for="(item,i) in items">
                <input type="checkbox" :id="'cbx'+i"><label :for="'cbx'+i">{{item}}</label>
            </span>
        </div>
        `
    })
    
    Vue.component("combo",{
        props:["items","select","display", "value"],
        template:`
            <div>
                <select>
                    <option v-for="item in items" :value="item[value]" :selected="select == item[value]">
                        {{item[display]}}
                    </option>
                </select>
            </div>
        `
    })


    var v = new Vue({
        el:"#app",
        data:{
            likes:["看书","电影","唱歌","跳舞"],
            heroes: [
                new Hero("林冲", "豹子头", 99, 85, 90),
                new Hero("武松", "行者", 98, 80, 88),
                new Hero("秦明", "霹雳火", 95, 82, 85),
                new Hero("白胜", "白日鼠", 75, 80, 85),
                new Hero("石秀", "拼命三郎", 97, 82, 83),
            ],
            citys:[
                {name:"衡阳", nums:"0734"},
                {name:"长沙", nums:"0731"},
                {name:"株洲", nums:"0732"},
                {name:"湘潭", nums:"0733"},
            ]
        }
    })
</script>



</body>
</html>